<template>
  <!---------------------- 时间筛选组件 ----------------------
  -->
  <div class="tabber-box mlr-25" :class="bgWhite?'bgWhite':''">
    <van-tabbar v-model="active" :fixed="fixed" :border="border" @change="onChange">
      <van-tabbar-item v-for="(item,index) in filterList" :key="index">{{ item }}</van-tabbar-item>
      <van-tabbar-item @click="openDatetimeSelect">
        <svg-icon icon-class="calendar" class="fs-34 top-5 pos-r" @goPage="openDatetimeSelect" />
      </van-tabbar-item>
    </van-tabbar>
    <p
      v-show="active!==0&&!bgWhite"
      class="mt-20 pl-25 color-white "
    >{{ datetime.startDate }} - {{ datetime.endDate }}</p>
    <datetime-select
      title="请选择开始时间"
      :show="timeStartSelect"
      @onConfirm="onStartConfirm"
      @clickOverlay="clickOverlay"
    />
    <datetime-select
      title="请选择结束时间"
      :show="timeEndSelect"
      @onConfirm="onEndConfirm"
      @clickOverlay="clickOverlay"
    />
  </div>
</template>

<script>
import SvgIcon from 'components/SvgIcon'
import datetimeSelect from 'components/datetimeSelect'
import utils from 'utils/utils'
import { Toast } from 'vant'
export default {
  name: 'DatetimeFilter',
  components: {
    SvgIcon,
    datetimeSelect
  },
  props: {
    timeStartSelect: {
      type: Boolean,
      required: true,
      default: false
    },
    timeEndSelect: {
      type: Boolean,
      required: true,
      default: false
    },
    bgWhite: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fixed: false,
      border: false,
      active: 0,
      datetime: {
        startDate: null,
        endDate: null
      },
      filterList: ['全部', '今日', '昨日', '本周', '本月']
    }
  },
  computed: {},
  methods: {
    onChange(index) {
      console.log(index)
      switch (index) {
        case 0:
          this.datetime.startDate = null
          this.datetime.endDate = null
          this.transferData()
          break
        case 1:
          this.datetime.startDate = utils.today().startDate
          this.datetime.endDate = utils.today().endDate
          this.transferData()
          break
        case 2:
          this.datetime.startDate = utils.yesterday().startDate
          this.datetime.endDate = utils.yesterday().endDate
          this.transferData()
          break
        case 3:
          this.datetime.startDate = utils.thisWeek().startDate
          this.datetime.endDate = utils.thisWeek().endDate
          this.transferData()
          break
        case 4:
          this.datetime.startDate = utils.thisMonth().startDate
          this.datetime.endDate = utils.thisMonth().endDate
          this.transferData()
          break
      }
    },
    openDatetimeSelect() {
      this.$emit('openDatetimeSelect')
    },
    onStartConfirm(value) {
      this.datetime.startDate = utils.dateFomat('yyyy.m.d', value)
      this.$emit('onStartConfirm')
    },
    onEndConfirm(value) {
      this.datetime.endDate = utils.dateFomat('yyyy.m.d', value)
      if (this.datetime.endDate < this.datetime.startDate) {
        Toast({
          message: '结束时间不得小于开始时间，请重新选择'
        })
        return
      }
      this.$emit('onEndConfirm')
      this.transferData()
    },
    clickOverlay() {
      this.$emit('close')
    },

    // 将datetime传给父组件
    transferData() {
      this.$emit('getData', this.datetime)
    }
  }
}
</script>
<style lang="scss" scoped>
/* 标签栏*/
.tabber-box {
  /deep/.van-tabbar {
    background: transparent;
    height: auto;
    justify-content: space-between;
    margin: 20px 0;
    overflow-y: hidden;
    overflow-x: scroll;
    .van-tabbar-item {
      font-size: 12px;
      line-height: 2;
      flex: auto;
      flex-shrink: 0;
      color: $colorF;
      .van-tabbar-item__icon {
        margin: 0;
      }
      .van-tabbar-item__text {
        padding: 0 10px;
      }
    }
    .van-tabbar-item--active {
      background: $colorF;
      border-radius: 12px;
      @include color-primary;
    }
  }
}
.bgWhite{
  background: $colorF;
  /deep/.van-tabbar {
  .van-tabbar-item {
      color: $color6;
    }
    .van-tabbar-item--active {
      color: $colorF !important;
      @include bg-primary;
    }
  }
}
</style>
